<template>
	<view class="body">
		<view class="" v-if="videoData.messageType=='gotoclass'">
			<view class="people_box" v-if="isMeCall">
				<image :src="videoData.faceUrl" mode=""></image>
				<view class="name_box">
					<text class="text1">{{videoData.nickName}}</text>
					<text class="text2">上课连线中,等待对方确认...</text>
				</view>
			</view>
			<view class="people_box" v-else>
				<image :src="friendHeadUrl" mode=""></image>
				<view class="name_box">
					<text class="text1">{{ThisName}}</text>
					<text class="text2">邀请你进入上课课堂</text>
				</view>
			</view>
		</view>
		<view class="" v-else-if="videoData.messageType=='normal'">
			<view class="people_box" v-if="isMeCall">
				<image :src="videoData.faceUrl" mode=""></image>
				<view class="name_box">
					<text class="text1">{{videoData.nickName}}</text>
					<text class="text2">等待对方接受邀请...</text>
				</view>
			</view>
			<view class="people_box" v-else>
				<image :src="friendHeadUrl" mode=""></image>
				<view class="name_box">
					<text class="text1">{{ThisName}}</text>
					<text class="text2">邀请你视频通话</text>
				</view>
			</view>
		</view>


		<view class="bottom_box" v-if="isMeCall" @tap="cancelCall('quxiao')">
			<image src="../../../static/jingyou/jujue.png" mode=""></image>
			<text>取消</text>
		</view>
		<view class="bottom_box2" v-else>
			<view class="wid" @tap="cancelCall('jujue')">
				<image src="../../../static/jingyou/jujue.png" mode=""></image>
				<text>取消</text>
			</view>
			<view class="wid" @tap="toEvaluate">
				<image src="../../../static/jingyou/tongyi.png" mode=""></image>
				<text>同意</text>
			</view>
		</view>
	</view>
</template>

<script>
	import webim from '../../../common/webim_wx.min.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['hascall']),
		data() {
			return {
				isMeCall: false, //通话是否是自己发起的
				userinfo: '', //自己的用户信息
				videoData: '', //视频信息
				loginInfo: '', //腾讯云用户信息
				friendHeadUrl: '', //头像
				ThisName: '', //名字
				selType: 'C2C',
				count: "", //接通倒计时
				timer: null,
				end_time: '', //可以视频的时间
			}
		},
		onLoad(option) {
			this.userinfo = uni.getStorageSync('user_info')
			this.videoData = JSON.parse(option.data)
			if (this.videoData.roomId == uni.getStorageSync('user_id')) {
				this.isMeCall = true
				this.selToID = this.videoData.userId
			} else {
				this.selToID = this.videoData.roomId
				this.getProfilePortrait(this.videoData.roomId)
			}
			console.log(this.selToID, '对面id')
			this.end_time = this.videoData.end_time
			this.loginInfo = uni.getStorageSync('loginInfo')
			this.timeDowm()
		},
		onUnload() {
			clearInterval(this.timer);
			console.log('页面隐藏')
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			cancelCall(type) {
				var me = this;
				if (type == 'quxiao') {
					this.sendCustomMsg('quxiao')
					// console.log(11111)
				} else if (type == 'jujue') {
					this.sendCustomMsg('jujue')
				}
				if (this.videoData.messageType == 'normal') {
					var type = 'video'
				} else if (this.videoData.messageType == 'gotoclass') {
					var type = 'class'
				}
				var data = {
					id: this.videoData.video_id,
					type: type,
					status: 2
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'videoDuration',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res, '挂断视频')
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			sendCustomMsg(type) { //发送自定义消息
				if (type == 'jujue') {
					var data = {
						type: 'videorefuseMessage',
						roomId: this.videoData.roomId,
						userId: this.videoData.userId,
						faceUrl: this.videoData.faceUrl,
						nickName: this.videoData.nickName,
					}
				} else if (type == 'quxiao') {
					var data = {
						type: 'videocancelMessage',
						roomId: this.videoData.roomId,
						userId: this.videoData.userId,
						faceUrl: this.videoData.faceUrl,
						nickName: this.videoData.nickName,
					}
				} else if (type == 'tongyi') {
					var data = {
						type: 'videoAgreeMessage',
						roomId: this.videoData.roomId,
						// duration: '',
						video_id: this.videoData.video_id,
						messageType: this.videoData.messageType,
						userId: this.videoData.userId,
						faceUrl: this.videoData.faceUrl,
						nickName: this.videoData.nickName,
						end_time: this.end_time,
					}
					if (this.videoData.messageType == 'gotoclass') {
						data.appointment_id = this.videoData.appointment_id
					}
				}
				var me = this
				data = JSON.stringify(data)
				console.log(data, '数据')
				var desc = "";
				var ext = "";

				var msgLen = webim.Tool.getStrBytes(data);

				// if (type == 'jujue' || type == 'tongyi') {
				// 	var selToID = this.videoData.userId;
				// } else if (type == 'quxiao') {
				// 	var selToID = this.selToID
				// }
				var selToID = this.selToID




				if (data.length < 1) {
					console.log("发送的消息不能为空!");
					return;
				}
				var maxLen, errInfo;
				if (this.selType == webim.SESSION_TYPE.C2C) {
					maxLen = webim.MSG_MAX_LENGTH.C2C;
					errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
				} else {
					maxLen = webim.MSG_MAX_LENGTH.GROUP;
					errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
				}
				if (msgLen > maxLen) {
					console.log(errInfo);
					return;
				}
				// console.log(selSess);
				console.log(111);
				if (!selSess) {
					var selSess = new webim.Session(this.selType, selToID, selToID, this.friendHeadUrl, Math.round(new Date().getTime() /
						1000));
				}
				var msg = new webim.Msg(selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
				var custom_obj = new webim.Msg.Elem.Custom(data, desc, ext);
				msg.addCustom(custom_obj);
				//调用发送消息接口
				msg.sending = 1;
				webim.sendMsg(msg, function(resp) {
					// addMsg(msg);
					// $("#id_" + msg.random).find(".spinner").remove();
					// if (selType == webim.SESSION_TYPE.C2C) {
					//     //私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
					//     addMsg(msg);
					// }
					// $('#edit_custom_msg_dialog').modal('hide');
					var msgData = {
						content: JSON.parse(data),
						fromAccount: uni.getStorageSync('user_id').toString(),
					}
					if (type == 'video') {
						msgData.type = 'video'
					}
					// me.meTextMsg.push(msgData)

				}, function(err) {
					console.log(err.ErrorInfo);
				});
			},
			toEvaluate() {
				var data = JSON.stringify(this.videoData)
				uni.redirectTo({
					// url:'../../../pages/Friend/evaluateTeacher/evaluateTeacher'//评论
					// url:'../../../pages/My/summaryDetail/summaryDetail'//总结
					url: '../../../pages/Friend/videoChat/videoChat?roomId=' + this.videoData.roomId + '&data=' + data //聊天界面
				})
				this.sendCustomMsg('tongyi')
			},
			timeDowm() { //倒计时
				const TIME_COUNT = 60;

				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
							console.log(this.count)
						} else {
							clearInterval(this.timer);
							this.timer = null;
							if (this.isMeCall == true) {
								this.cancelCall('quxiao')
								uni.showToast({
									title: '暂时无人接听，已取消',
									icon: 'none'
								})
							}

						}
					}, 1000)
				}
			},
			//获取用户昵称头像
			getProfilePortrait(ThisUserId) {
				var that = this
				var data = {
					"To_Account": [ThisUserId],
					"TagList": [
						"Tag_Profile_IM_Nick",
						"Tag_Profile_IM_Image"
					]
				}
				var options = data
				console.log(111111111111)
				console.log(options)
				webim.getProfilePortrait(
					options,
					function(resp) {
						console.log(resp, '用户信息')
						that.ThisName = resp.UserProfileItem[0].ProfileItem[0].Value
						that.friendHeadUrl = resp.UserProfileItem[0].ProfileItem[1].Value
					}
				)
				console.log(this.ThisName, '名字', this.friendHeadUrl, '头像')
			},
		}
	}
</script>

<style scoped>
	.body {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.people_box {
		display: flex;
		align-items: center;
		position: absolute;
		top: 106upx;
		left: 33upx;
	}

	.people_box image {
		width: 108upx;
		height: 108upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 24upx;
	}

	.name_box {
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
	}

	.bottom_box {
		display: flex;
		flex-direction: column;
		position: absolute;
		align-items: center;
		bottom: 128upx;
		width: 100%;
		color: #FFFFFF;
		font-size: 26upx;
	}

	.bottom_box image {
		width: 140upx;
		height: 140upx;
		margin-bottom: 24upx;
	}

	.text1 {
		font-size: 32upx;
	}

	.text2 {
		font-size: 26upx;
	}

	.bottom_box2 {
		display: flex;
		justify-content: space-between;
		padding: 0 106upx;
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		bottom: 128upx;
	}

	.wid {
		width: 140upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 26upx;
	}

	.wid image {
		width: 140upx;
		height: 140upx;
		margin-bottom: 24upx;
	}
</style>
